<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/index.css">
    <title>红岩官网</title>
</head>

<!-- 199010224 黄咏诗 -->
<body>
    <!--网页头部-->
    <header>
        <div class="header-main">
            <div class="clearBoth"></div>
            <!--页面头部左边部分-->
            <div class="header-left">
                <!--logo-->
                <div class="logo">
                    <a href=""><img src="images/logo.png" alt=""></a>
                </div>
            </div>
            <!--页面头部右边部分-->
            <div class="header-right">
                <div class="clearBoth2"></div>
                <!--向导-->
                <div class="header-guide">
                    <a href="">
                        <img src="images/icon-18.png" alt="">
                    </a>
                </div>
                <div class="clearBoth3"></div>
                <!--链接-->
                <div class="header-link">
                    <p>
                        <a href="">设为首页</a>|
                        <a href="">加入收藏</a>|
                        <a href="">热线：023-65312300（沙坪坝片区）023-63303457（渝中片区）</a>|
                        <a href="">English</a>
                    </p>
                </div>
                <div class="clearBoth4"></div>
                <!--搜索框-->
                <div class="search">
                    <input class="search-text" type="text" placeholder="请输入搜索关键词">
                    <span><a href="">搜索</a></span>
                </div>
            </div>
        </div>
    </header>
    <div class="clear"></div>

    <nav>
        <!--导航栏-->
        <div class="nav-main">
        <div id="app" v-cloak>
            <!--一级导航-->
            <li v-for="menu in menus" @mouseover="menu.show=!menu.show" @mouseout="menu.show=!menu.show">
                <a class="nav-one" href="menu.url">
                    {{menu.name}}
                    <span>{{menu.english}}</span>
                </a>
                <!--二级导航-->
                <ul v-show="menu.show">
                    <li v-for="subMenu in menu.subMenus">
                        <a class="nav-two" href="subMenu.url">{{subMenu.name}}</a>
                    </li>
                </ul>
            </li>
        </div>
        <script src="https://unpkg.com/vue@next"></script>
        <!--导航内容-->
        <script>
            const data={
                menus:[
                    {
                        name:'首页',url:'#',show:false, 
                        english:'Home',url:'#',//一级导航内容
                    },
                    {
                        name:'关于红岩',url:'#',show:false,
                        english:'HongYan',url:'#',//一级导航内容
                        subMenus:[
                        {name:'红岩文化',url:'#'},
                        {name:'博物馆机构',url:'#'},
                        {name:'历史沿革',url:'#'},//二级导航内容
                    ]
                    },
                    {
                        name:'公告动态',url:'#',show:false,
                        english:'Dynamics',url:'#',//一级导航内容
                        subMenus:[
                        {name:'文博信息',url:'#'},
                        {name:'政务平台',url:'#'},
                        {name:'公告',url:'#'},
                        {name:'专题报道',url:'#'},//二级导航内容
                    ]
                    },
                    {
                        name:'馆藏精品',url:'#',show:false,
                        english:'Collection',url:'#',//一级导航内容
                        subMenus:[
                        {name:'一级文物',url:'#'},
                        {name:'二级文物',url:'#'},
                        {name:'三级文物',url:'#'},//二级导航内容
                    ]
                    },
                    {
                        name:'陈列展览',url:'#',show:false,
                        english:'Exhibition',url:'#',//一级导航内容
                        subMenus:[
                        {name:'虚拟展览',url:'#'},
                        {name:'基本陈列',url:'#'},
                        {name:'复原陈列',url:'#'},
                        {name:'临时展览',url:'#'},
                        {name:'展览交流',url:'#'},//二级导航内容
                    ]
                    },
                    {
                        name:'研究开发',url:'#',show:false,
                        english:'Research',url:'#',//一级导航内容
                        subMenus:[
                        {name:'历史研究',url:'#'},
                        {name:'艺术创作',url:'#'},
                        {name:'影音在线',url:'#'},
                        {name:'文创产品',url:'#'},//二级导航内容
                    ]
                    },
                    {
                        name:'公共教育',url:'#',show:false,
                        english:'Education',url:'#',//一级导航内容
                        subMenus:[
                        {name:'党性教育',url:'#'},
                        {name:'爱国主义教育',url:'#'},
                        {name:'研学实践教育',url:'#'},
                        {name:'科普教育',url:'#'},//二级导航内容
                    ]
                    },
                    {
                        name:'参观服务',url:'#',show:false,
                        english:'Service',url:'#',//一级导航内容
                        subMenus:[
                        {name:'景点内容',url:'#'},
                        {name:'服务内容',url:'#'},
                        {name:'网上预约',url:'#'},
                        {name:'志愿服务',url:'#'},//二级导航内容
                    ]
                    },
                    {
                        name:'网上预约',url:'#',show:false,
                        english:'Reservation',url:'#',//一级导航内容
                    }
            ]
            };
            // 创建应用实例
            const vm=Vue.createApp({
                data(){
                    return data;
                }
            }).mount('#app');// 挂载到跟组件
        </script>
        </div>
    </nav>
</body>
</html>